<template>
  <div>
    <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
  </div>

</template>

<script>
var content = [
  "<div><h1>这是信息窗口</h1></div>"
];


export default {
  name: "Map",
  data(){
    return{

    }
  },
  mounted() {
    var map, route, marker;
    // 创建地图实例
    map = new AMap.Map("container", {
      zoom: 13,
      center: [110.462283,29.119579],
    });
    var clickHandler = function(e) {
     console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
      // 打开信息窗体
      infoWindow.open(map,map.getCenter());
    };

// 绑定事件
//     map.on('click', clickHandler);


// 创建 infoWindow 实例
    var infoWindow = new AMap.InfoWindow({
      content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
    });




    // 创建一个 Marker 实例：
    marker = new AMap.Marker({
      position: new AMap.LngLat(110.462283,29.119579),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '张家界高尔夫',
      icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
    });
    marker.on('click', clickHandler)


    //绘制初始路径
    var path = [];
    path.push([116.303843, 39.983412]);
    path.push([116.321354, 39.896436]);
    path.push([116.407012, 39.992093]);
    map.plugin("AMap.DragRoute", function() {
      route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
      route.search(); //查询导航路径并开启拖拽导航
    });

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
  }
}
</script>

<style scoped>

</style>